import './index.scss'

import { useState } from 'react'
import PropTypes from 'prop-types'
import { useMount, useTitle, useFavicon } from 'ahooks'

import { GetIndexedDB } from '../../Utils/IndexedDB'

const { imageUrl, fullName } = window
const LogoA01 = ({ OpenStatus, OpenEvent }) => {
    LogoA01.propTypes = { OpenStatus: PropTypes.bool, OpenEvent: PropTypes.object }
    const [Theme, setTheme] = useState()
    const [OpenStatusMenu, setOpenStatusMenu] = useState(OpenStatus)

    useTitle(fullName)
    useFavicon(imageUrl + 'Ico.ico')
    useMount(async () => {
        const { LogoSet } = await GetIndexedDB('theme')
        setTheme(LogoSet)
    })

    OpenEvent.useSubscription(() => setOpenStatusMenu(!OpenStatusMenu))

    if (Theme) {
        const {
            width,
            blurState,
            blurColor,
            blurFilter,
            imgSize,
            imgRadius,
            customTitle,
            customSize,
            customColor,
            customWeight,
            customFamily,
            smallTitle,
            smallSize,
            smallColor,
            smallWeight,
            smallFamily,
            textShadow,
        } = Theme

        return (
            <div
                className="logoTemplate LogoA01"
                style={{
                    '--width': width,
                    '--blurColor': blurColor,
                    '--blurFilter': blurFilter,
                    '--imgRadius': imgRadius,
                    '--customSize': customSize,
                    '--customColor': customColor,
                    '--customWeight': customWeight,
                    '--customFamily': customFamily,
                    '--smallSize': smallSize,
                    '--smallColor': smallColor,
                    '--smallWeight': smallWeight,
                    '--smallFamily': smallFamily,
                    '--textShadow': textShadow,
                }}
            >
                {blurState && <div className='mask' />}
                <img style={{ width: OpenStatusMenu ? 40 : imgSize }} src={imageUrl + 'Logo.png'} alt="" />
                {!OpenStatusMenu && <div className='title'>{customTitle || fullName}</div>}
                {!OpenStatusMenu && smallTitle && <div className='small'>{smallTitle}</div>}
            </div>
        )
    }
};

export default LogoA01;